<template>
  <div class="root-container column-center">
    <div class="top-bg">
      <img src="../assets/img/bg.png" alt=""/>
    </div>
    <div class="btn-con row-justify-center">
      <div @click="test" class="map-btn">初始化</div>
      <div @click="ue5Fuc" class="map-btn">调用ue5</div>
      <div class="map-btn">今日油价情况</div>
      <div class="map-btn">模拟汽车加油</div>
      <div class="map-btn">地下模式</div>
      <div class="map-btn">油罐状态显示</div>
      <div @click="close" class="map-btn">关闭项目</div>

    </div>
  </div>
</template>

<script>

export default {
  name: "Login",

  data() {
    return {}
  },
  mounted() {
    ue.interface.showSidebar = () => {
//函数内部执行操作
      alert("调用成功");
    };
  },
  methods: {
    close(){
      ue5("close", "雷猴啊");
    },
    ue5Fuc() {
      ue5("test", "雷猴啊");
    },
    test() {
      alert("rasd")
    },
  }

}
</script>

<style scoped>
.top-bg {
  position: absolute;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
}

.top-bg img {
  width: 100%;
}

.map-view {
  width: 100%;
  height: 100vh;
  background: black;
}

.btn-con {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 100%;
}

.btn-con .map-btn {
  background: black;
  width: 120px;
  height: 32px;
  line-height: 32px;
  font-weight: bold;
  text-align: center;
  color: white;
  cursor: pointer;
  margin-left: 15px;
  margin-right: 15px;
  background: url("../assets/img/btn-bg.png");
}

</style>
